<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-30 10:08:43
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-31 08:44:48
 * @FilePath: \guanggu_traffic\src\views\traffic\RoadConditionInfo\ConditionInfoPopup.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<el-dialog
		title="报告路况"
		width="1000"
		draggable
		overflow
		:close-on-click-modal="false"
		@open="handleOpen"
	>
		<div class="control">
			<el-input
				v-model="descriptionReport"
				placeholder="请详细描述事件"
				size="large"
				style="width: 240px"
			/>
            <!-- 过滤掉已经审核过的数据 -->
			<el-button
				@click="handleFilter"
				size="large"
				class="el-button--left"
				><i class="iconfont icon-shuaxin"></i
			></el-button>
			<el-button @click="exportExcel" size="large"
				><i class="iconfont icon-excel1"></i
			></el-button>
		</div>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="name" label="用户名" width="80" />
			<el-table-column prop="type" label="事件类型" width="100" />
			<el-table-column prop="address" label="事件地址" />
			<el-table-column prop="signage" label="附近建筑" width="100" />
			<el-table-column prop="time" label="发生时间" />
			<el-table-column prop="describe" label="事件描述" />
			<el-table-column label="操作">
				<template #default="scope">
					<template v-if="scope.row.status === 0">
						<div class="el-button-group">
							<el-button
								type="primary"
								class="refuse"
								@click="handleDelete(scope.row.id)"
								>忽略</el-button
							>
							<el-button
								type="primary"
								class="pass"
								@click="handlePass(scope.row.id)"
								>通过</el-button
							>
						</div>
					</template>
					<template v-else> 已审核 </template>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页器 
      :current-page="currentPage" 当前页码
      :page-size="limit" 每页显示条数
      :total="props.modalData.attrValues.length" 总条数
      @current-change="handleCurrentChange" 切换页码时触发
-->
		<el-pagination
			size="small"
			background
			layout="prev, pager, next"
			:page-size="limit"
			:total="middleData.length"
			:current-page="currentPage"
			@current-change="handleCurrentChange"
		/>
	</el-dialog>
</template>

<script setup>
import {
	getReportHttp,
	delReportHttp,
	updateReportHttp,
} from '@/request/request'
import { ref, computed } from 'vue'
import * as XLSX from 'xlsx'
let result = ref([])
let descriptionReport = ref('') //搜索关键字
//分页逻辑
let limit = 4;
const middleData = ref([]);
const currentPage = ref(1);
//弹窗打开时自动执行事件回调函数
const handleOpen = () => {
	//获取报告数据
	getReportHttp().then((res) => {
		result.value = red.data
	})
}
//更新页码
const handleCurrentChange = (val) => {
	currentPage.value = val
}
//表格数据有以下计算属性得到
const tableData = computed({
	get: () => {
		//如果输入框有值则过滤数据
		let filterData = result.value
		if (descriptionReport.value) {
			filterData = result.value.filter(
				(item) =>
					item.name.includes(descriptionReport.value) ||
					item.type.includes(descriptionReport.value) ||
					item.address.includes(descriptionReport.value) ||
					itme.signage.includes(descriptionReport.value) ||
					item.describe.includes(descriptionReport.value)
			)
		}
		middleData.value = filterData
		const start = (currentPage.value - 1) * 4 //开始条数(索引值)
		const end = start + limit //结束条数(索引值)
		return filterData.slice(start, end)
	},
	set: (value) => {
		console.log(value)
	},
})
//调用接口删除数据
const handleDelete = (id) => {
	delReportHttp({ id }).then((res) => {
		if (res.code == 200) {
			result.value = result.value.filter((item) => item.id !== id)
		}
	})
}
//调用审核接口(更新数据状态)
const handlePass = (id) => {
	updateReportHttp({ id }).then(() => {
		result.value = result.value.map((item) => {
			if (item.id == id) {
				item.status = 1
			}
			return item
		})
	})
}
//导出Excel表格
const exportExcel = () => {
	//创建工作簿
	const workbook = XLSX.utils.book_new()
	//将表格数据转换为工作表
	const worksheet = XLSX.utils.json_to_sheet(tableData.value)
	//将工作表添加到工作簿  参数 (工作簿,工作表,工作表名字'sheet1')
	XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet1')
	//导出excelw文件
	XLSX.writeFile(workbook, '路况信息.xlsx')
}
//过滤掉已经审核过的数据
const handleFilter = ()=>{
    result.value = result.value.filter((item)=> item.status===0)
    tableData.value = result.value;
}
</script>

<style lang="scss" scoped>
.el-button--primary {
	align-items: center;
	margin: 10px auto;
	display: block;
}
.el-button--primary.refuse {
	background-color: green;
	border-color: green;
}
.el-button--primary.pass {
	background-color: red;
	border-color: red;
}

.control {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-bottom: 10px;
}

.el-button {
	margin: 0px;
}
:deep(.el-table__row) {
	height: 85px;
}
.el-pagination {
	margin-top: 10px;
}
.el-button-group {
	box-sizing: border-box;
	display: flex;
	/* flex-direction: column; */
	gap: 10px;
}
</style>
